<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .gray {
      color: gray;
    }

    .black {
      color: black;
    }
  </style>
</head>

<body>
  <input type="text" class="gray" value="请输入搜索关键字" id="txtSearch">
  <input type="button" value="搜索" id="btnSearch">
  <script>
    // 获取元素
    var txtSearch = document.getElementById("txtSearch");
    // 1.获得焦点时提示请输入搜索关键字
    txtSearch.onfocus = function () {
      // 判断是否是默认的提示文字
      if (this.value === "请输入搜索关键字") {
        this.value = "";
        this.className = "black";
      }
    };
    // 2.失去焦点时，如果内容为空，恢复默认提示语，并且设置文字颜色为灰色
    txtSearch.onblur = function () {
      if (this.value === "" || this.value === "请输入搜索关键字") {
        this.value = "请输入搜索关键字";
        this.className = "gray";
      }
    };
  </script>
</body>

</html>